<template>
  <div class="min-h-screen flex flex-col bg-gray-50">
    <!-- 顶部 -->
    <TopBar />
    <!-- 搜索 -->
    <div class="flex justify-between items-center w-4/5 mx-auto py-8">
      <!-- Logo -->
      <h1 class="w-6/24 text-center text-6xl"><a href="">Logo</a></h1>
      <!-- 搜索框 -->
      <div class="w-12/24 flex flex-col items-center">
        <div class="flex justify-center w-full">
          <input type="search"
            class="h-11 w-full border-2 border-red-400 rounded-l-lg px-3 focus:outline-none focus:ring-2 focus:ring-red-200"
            placeholder="正宗桂林米粉" v-model="searchName">
          <button
            class="h-11 w-1/7 bg-red-400 rounded-r-lg px-3 text-white text-lg font-bold cursor-pointer hover:bg-red-500 transition-colors"
            @click="clickSearch(searchName)">搜索</button>
        </div>
        <ul class="w-full flex search-items mt-1 overflow-x-auto py-1">
          <li class="whitespace-nowrap" @click="clickSearch('小米')">小米</li>
          <li class="whitespace-nowrap" @click="clickSearch('pro')">pro</li>
          <li class="whitespace-nowrap" @click="clickSearch('三只松鼠')">三只松鼠</li>
        </ul>
      </div>
      <div class="w-6/24 flex justify-end items-center">
      </div>
    </div>
    <!-- 底部 -->
    <div class="w-4/5 mx-auto my-5 border-t-3 border-t-amber-300 rounded-2xl p-3">
      <div class="text-pink-400 flex gap-2.5 items-center text-2xl mb-3">
        <el-icon>
          <Promotion />
        </el-icon>
        <span>'<span class="text-red-500">{{ route.params.name }}</span>'的搜索结果</span>
      </div>
      <div class="flex flex-wrap justify-around gap-y-3 ">
        <Product v-for="(item, index) in products" :item="item" :key="item.spuId"
          @click="$router.push('/item/' + item.spuId)" />
        <div v-show="products.length == 0" class="my-5 text-3xl">- 暂无数据 -</div>
      </div>
    </div>
    <!-- 侧边 -->
    <Aside />
  </div>
</template>

<script setup>
import { getCategoryAPI } from '@/apis/category';
import { searchProductApi } from '@/apis/products';
import Aside from '@/components/Aside.vue';
import Product from '@/components/Product.vue';
import TopBar from '@/components/TopBar.vue';
import { onMounted, onUnmounted, ref, computed, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const userAccount = ref('')
const userId = ref('')
let products = ref([])
let searchName = ref('')
const clickSearch = (name) => {
  router.push(`/items/${name}`)
}
const getItems = async () => {
  let res = await searchProductApi(route.params.name)
  products.value = res.data
}

onMounted(() => {
  getItems()
  userAccount.value = localStorage.getItem('userAct')
  userId.value = localStorage.getItem('userId')
})

watch(() => route.params.name, () => {
  getItems()
})
</script>

<style lang="scss" scoped>
.search-items {
  li {
    padding: 0 .5rem;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
  }

  li:hover {
    color: red;
  }
}

.category {
  li {
    li {
      padding: 0 .7rem;
      transition: all 0.3s;

      &:hover {
        color: red;
        text-decoration: underline;
      }
    }

    span {
      cursor: default;
    }

    &:hover {
      background-color: #fcfcfc;
      transition: background-color 0.3s;
    }
  }
}

.info {
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    width: 100%;
    height: 4.5rem;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: 0.5rem;
    transition: all 0.3s;
    cursor: pointer;
  }

  li:hover {
    border-color: red;
  }
}
</style>